<template>
  <div class="add">
    <!-- 头部 -->
    <van-nav-bar title="发布房源">
      <template #left>
        <van-icon name="arrow-left" @click="$router.back()" />
      </template>
    </van-nav-bar>

    <!-- 添加房源 -->
    <!-- 房源信息标题 -->
    <van-cell title="房源信息" class="fangyuan-title"/>
    <!-- 房源信息描述 -->
    <van-form route @submit="onSubmit">
      <van-cell
        v-model="form.community"
        title="小区名称"
        value="请输入小区名称"
        is-link
        to="/rent/search"
      />

      <!-- 租金 -->
      <van-field v-model="form.price" placeholder="请输入租金/月">
        <template #label>
          <span>租&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;金</span>
        </template>
        <template #extra>
          <span style="color:#C8CAD1;">￥/月</span>
        </template>
      </van-field>

      <!-- 建筑面积 -->
      <van-field label="建筑面积" placeholder="请输入建筑面积" v-model="form.size">
        <template #extra>
          <span style="color:#C8CAD1;">m^2</span>
        </template>
      </van-field>

      <!-- 户型 -->
      <home-style  v-model="form.roomType" :homeType="pubInfo"/>
      <!-- 所在楼层 -->
      <home-floor v-model="form.floor" />
      <!-- 朝向 -->
      <home-direction v-model="form.oriented" />
      <!--房屋标题  -->
      <van-cell title="房屋标题" />
      <van-cell-group>
        <van-field
          v-model="form.title"
          placeholder="请输入标题（例如：整租 小区名 2室  5000元）"
        />
      </van-cell-group>
      <!-- 上传头像 -->
      <van-cell title="房屋图像" />
      <van-uploader :after-read="afterRead" upload-icon="plus" v-model="form.houseImg" > </van-uploader>

      <van-cell title="房屋配置"  v-model="form.supporting"/>
      <!-- 房屋配置 -->
      <van-grid :column-num="5" :border="false" class="home-peizhi">
        <van-grid-item text="衣柜">
          <template #icon>
            <span class="iconfont icon-zufang-yigui"></span>
          </template>
        </van-grid-item>
        <van-grid-item text="洗衣机">
          <template #icon>
            <span class="iconfont icon-zufang-xiyiji"></span>
          </template>
        </van-grid-item>
        <van-grid-item text="空调">
          <template #icon>
            <span class="iconfont icon-zufang-kongdiao"></span>
          </template>
        </van-grid-item>
        <van-grid-item text="天然气">
          <template #icon>
            <span class="iconfont icon-zufang-tianranqi"></span>
          </template>
        </van-grid-item>
        <van-grid-item text="冰箱">
          <template #icon>
            <span class="iconfont icon-zufang-bingxiang"></span>
          </template>
        </van-grid-item>
        <van-grid-item text="暖气">
          <template #icon>
            <span class="iconfont icon-zufang-nuanqi"></span>
          </template>
        </van-grid-item>
        <van-grid-item text="电视">
          <template #icon>
            <span class="iconfont icon-zufang-dianshiji"></span>
          </template>
        </van-grid-item>

        <van-grid-item text="热水器">
          <template #icon>
            <span class="iconfont icon-zufang-reshuiqi"></span>
          </template>
        </van-grid-item>
        <van-grid-item text="宽带">
          <template #icon>
            <span class="iconfont icon-zufang-wifi"></span>
          </template>
        </van-grid-item>
        <van-grid-item text="沙发">
          <template #icon>
            <span class="iconfont icon-zufang-shafa"></span>
          </template>
        </van-grid-item>
      </van-grid>

      <van-cell title="房屋描述" />
      <van-cell-group>
        <van-field class="home-description" rows="1" autosize type="textarea" v-model="form.description" placeholder="请输入房屋描述信息" />
      </van-cell-group>

      <!-- 提交按钮 -->
       <div class="home-choose" >
        <van-button type="default" native-type="submit">取消</van-button>
        <van-button type="primary"  native-type="submit" color="#21B97A">提交</van-button>
      </div>
    </van-form>
    <!-- <button @click="onSubmit1" class="sub">提交</button> -->
  </div>
</template>

<script>
import HomeDirection from './components/HomeDirection.vue'
import HomeFloor from './components/HomeFloor.vue'
import HomeStyle from './components/HomeStyle.vue'
import { publishHome } from '@/api/user.js'
import { publishParams } from '@/api/house.js'

export default {
  components: { HomeStyle, HomeFloor, HomeDirection },
  name: 'add',
  data () {
    return {
      value: '',
      pubInfo: {}, // 发布所需要的信息
      form: {
        title: '',
        description: '',
        houseImg: [
          // Uploader 根据文件后缀来判断是否为图片文件
          // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
        ],
        oriented: '',
        supporting: '',
        price: '',
        roomType: '',
        size: '',
        floor: '',
        community: ''
      },
      form1: {
        title: '整租 · 豪华小区 精装修出租 小区环境幽静',
        description: '【装修描述】 装修简洁，家电配齐，通风采光效果良好，格局方正。',
        houseImg: 'img1|im2|img3',
        oriented: 'ORIEN|caa6f80b-b764-c2df',
        supporting: '空调|洗衣机',
        price: '1234',
        roomType: 'ROOM|ce2a5daa-811d-2f49',
        size: '123',
        floor: 'FLOOR|1',
        community: 'AREA|93cbbe43-741d-de54'
      }
    }
  },

  created () {
    if (!this.user) {
      this.publishHomeInfo()
    }
  },

  methods: {
    // 上传图片
    afterRead (file) {
      // 此时可以自行将文件上传至服务器
      console.log(file)
    },
    // 发布房源想、所需要的信息
    async  publishHomeInfo () {
      const res = await publishParams()
      this.pubInfo = res.data.body
      // console.log(this.pubInfo)
    },

    // 发布房源
    async onSubmit () {
      try {
        const res = await publishHome(this.form)
        console.log(res)
      } catch (err) {
        console.dir(err)
      }
    }
  }
}
</script>

<style scoped lang="less">
/deep/.van-nav-bar {
  background-color: #21b97a;
  .van-nav-bar__title {
    color: #fff;
    font-size: 18px;
  }
  .van-icon {
    color: #fff;
  }
}

/deep/.van-uploader__wrapper {
  margin: 10px 0 0 10px;
  .van-uploader__upload {
    background-color: #fff;
    border: 1px solid #f7f8fa;
  }
}

/deep/.van-icon {
  font-size: 23px;
}

.fangyuan-title{
  color: #21b97a;
}

.iconfont{
  font-size: 23px;
  color:#333;
}

/deep/.van-grid-item__text{
  color:#333;
  font-size: 15px;
}

.home-peizhi{
  background-color: #F6F5F6;
  padding-bottom: 20px;
}

/deep/.home-description{
  // background-color: #eee;
  margin-bottom: 40px;
  height:148px;
  padding:0 10px;
}
.empty-box{
   background-color: #F6F5F6;
  padding-bottom: 20px;
}
.home-choose{
  margin: 0;
  position: fixed;
  bottom: 0;
  width: 100%;

  .van-button {
  width: 50%;
  height: 45px;
  }
  .van-button--default{
    color:#21B97A
  }
}
// .sub
//   width: 100px;
//   height: 100px;
//   margin-bottom: 50px;
//
</style>
